<template>
  <div class="projectTable">
    <el-row type="flex" justify="left">
      <el-button type="primary" icon="el-icon-plus" circle @click="addMonitem"></el-button>
      <el-button type="danger" icon="el-icon-minus" circle @click="deleteMonitem"></el-button>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column label="监测要素" width="180">
        <template slot-scope="scope">
          <cascader
            ref="test"
            @handleChange="MonTagSelect(scope.$index,$event)"
            :options="tagCascader"
          />
          {{ scope.rows }}
        </template>
      </el-table-column>
      <el-table-column label="监测天数" width="150">
        <template slot-scope="scope">
          <el-input-number size="small" v-model="scope.row.MonDays" :min="1" :max="9999" :value="1"></el-input-number>
          {{scope.rows}}
        </template>
      </el-table-column>
      <el-table-column label="监测频次" width="150">
        <template slot-scope="scope">
          <el-input-number size="small" v-model="scope.row.MonFreq" :min="1" :max="9999" :value="1"></el-input-number>
          {{scope.rows}}
        </template>
      </el-table-column>

      <el-table-column label="监测点位">
        <template slot-scope="scope">
          <!-- Dialog 监测点位 -->
          <el-dialog title="监测点位选择" :visible.sync="scope.row.dialogFormVisible">
            <monPosForm :tagId="scope.row.MonTagSmall" :monPos.sync="scope.row.projectPlanPosDetail"/>
            <div slot="footer" class="dialog-footer">
              <el-button @click="scope.row.dialogFormVisible = false">取 消</el-button>
              <!-- <el-button type="primary" @click="fullSelect(scope.row.projectPlanPosDetail)">{{ btnClearName }}</el-button> -->
              <el-button type="primary" @click="scope.row.dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
          <!-- <dialogMonPos :dialogFormVisible1="scope.row.dialogFormVisible" :monPos1="scope.row.projectPlanPosDetail" /> -->
          <!-- <dialogMonPos :dialogFormVisible1.sync="scope.row.dialogFormVisible" v-model="scope.row.projectPlanPosDetail" /> -->
          <!-- <el-input v-model="scope.row.projectPlanPosDetail" placeholder="监测点位"></el-input> -->
          <el-badge :value="Object.keys(scope.row.projectPlanPosDetail).length" style="width:90%" type="primary">
            <!-- <el-tooltip content="所有监测点位信息" placement="top"> -->
            <el-button
              size="small"
              class="btnPos"
              @click="changeMonPos(scope.$index, scope.row.projectPlanPosDetail)"
            >监测点位
              <!-- :{{scope.row.projectPlanPosDetail }} -->
            </el-button>
            <!-- </el-tooltip> -->
          </el-badge>
        </template>
      </el-table-column>
      <el-table-column label="监测项目">
        <template slot-scope="scope">
          {{scope.rows}}
          <!-- <el-tooltip content="所有监测点位信息" placement="top"> -->
          <el-badge :value="Object.keys(scope.row.projectPlanMonItemDetail).length" style="width:95%">
            <el-button
              size="small"
              style="width:100%"
              @click="changeMonItems(scope.$index, scope.row.projectPlanMonItemDetail)"
            >监测项目</el-button>
          </el-badge>

          <el-dialog title="监测项目选择" :visible.sync="scope.row.dialogFormVisible2" width="80%">
            <monItemForm :tagId="scope.row.MonTagBig" :monItems1.sync="scope.row.projectPlanMonItemDetail"/>
            <div slot="footer" class="dialog-footer">
              <el-button @click="scope.row.dialogFormVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="scope.row.dialogFormVisible2 = false">确 定</el-button>
            </div>
          </el-dialog>
          <!-- </el-tooltip> -->
          <!-- <el-input v-model="scope.row.projectPlanMonItemDetail" placeholder="监测项目"></el-input> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- Dialog 监测项目 -->
  </div>
</template>

<script>
import cascader from '@/components/input/cascader.vue'
import monItemForm from '@/components/form/monItemform.vue'
import monPosForm from '@/components/form/monPosForm.vue'
export default {
  components: {
    cascader,
    monPosForm,
    monItemForm
  },
  props: {
    tableData1: {
      type: Array,
      default: () => [
        {
          MonTagBig: '',
          MonTagSmall: '',
          MonDays: '1',
          MonFreq: '1',
          projectPlanPosDetail: [],
          projectPlanMonItemDetail: [],
          dialogFormVisible: false,
          dialogFormVisible2: false
        }
      ]
    }
  },
  computed: {
    tableData () {
      return this.tableData1
      // get: function() {
      //   return this.tableData1
      // },
      // set: newValue => {
      //   this.tableData1 = newValue
      // }
    }
  },
  data () {
    return {
      tempData: [],
      currentTableIndex: 0,
      checkboxGroup5: [],
      clearOnOff: false,
      tagCascader: [],
      input: '',
      multipleSelection: [],
      dialogFormVisible: false
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    addMonitem (rows) {
      this.tableData.push({
        MonTagBig: '',
        MonTagSmall: '',
        MonDays: '1',
        MonFreq: '1',
        projectPlanPosDetail: [],
        projectPlanMonItemDetail: [],
        dialogFormVisible: false,
        dialogFormVisible2: false
      })
    },
    deleteMonitem () {
      this.multipleSelection.forEach(
        e => this.tableData.splice(this.tableData.indexOf(e), 1)
        // this.tableData.delete(e)
      )
    },
    MonTagSelect (index, value) {
      // console.log(value)
      this.tableData[index].MonTagBig = value[0]
      this.tableData[index].MonTagSmall = value[1]
    },
    changeMonPos (index, data) {
      // console.log(index)
      this.tableData[index].dialogFormVisible = true
      // 调用子组件的请求获取数据
      // console.log(this.$refs)
      // console.log(this.$refs.test)
      // console.log(this.$refs.test2)
      // console.log(this.$refs.multipleTable)
      // this.$children[2].getPosByTagID()
      // this.currentTableIndex = index
      // this.tempData = data
    },
    changeMonItems (index, data) {
      // console.log(index)
      this.tableData[index].dialogFormVisible2 = true
      // this.currentTableIndex = index
      // this.tempData = data
    },

    getTagOptions () {
      this.axios.get('/Project/GetTagCascaderData/').then(response => {
        this.tagCascader = response.data
        // console.log(response.data)
      })
    }
  },
  mounted () {
    this.getTagOptions()
  }
}
</script>
<style lang="stylus">
.el-button
  overflow hidden
// .el-table .cell, .el-table th div
.cell
  overflow initial !important
.projectTable
  width 100%
.btnPos
  width 100%
</style>
